<script setup lang="ts">
let num = 50;
</script>

<template>
  <div class="pagenum">
    <div class="total">共&nbsp;{{ num }}&nbsp;条</div>
    <div class="tips num" data-num="-1">&#xed1d;</div>
    <div class="tips num select" data-num="1">1</div>
    <div class="tips num">2</div>
    <div class="tips num">&#xe73a;</div>
    <div class="tips num">4</div>
    <div class="tips num">5</div>
    <div class="tips num">&#xed1e;</div>
    <div class="num pg">10条/页 &nbsp;<span>&#xe62d;</span></div>
    <div class="jump">
      <span>跳至</span>
      <input class="page" type="text" />
      <span>页</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.pagenum {
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: flex-end;
  color: #606266;
  font-size: 14px;
  gap: 16px;
  > div {
    cursor: pointer;
  }
}

.total {
  line-height: 32px;
}

.num {
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  @include flexCenterCenter;
}

.jump {
  @include flexCenterCenter;
  display: flex;
}

.tips {
  width: 32px;
  height: 32px;
}

.pg {
  padding: 0px 12px;
}
.page {
  width: 48px;
  height: 32px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  @include flexCenterCenter;
  text-align: center;
  margin: 0px 8px;
}

// 选中的按钮
.select {
  border-color: #2163e0 !important;
  color: #2163e0 !important;
}
</style>
